<template>
  <div class="subject-content">

    <el-form :model="queryParams" size="medium" ref="queryForm" label-width="75px">
      <el-form-item label="账号" prop="userName" size="mini">
        <el-input v-model="queryParams.userName" clearable placeholder="请输入账号"/>
      </el-form-item>

      <el-form-item label="用户名称" prop="nickName" size="mini">
        <el-input v-model="queryParams.nickName" clearable placeholder="请输入用户名称"/>
      </el-form-item>

      <el-form-item size="mini">
        <el-button type="primary" icon="el-icon-search" @click="searchQuery">提交</el-button>
        <el-button type="primary" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" style="margin-bottom: 15px">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleBindingUser">绑定用户</el-button>
      </el-col>

      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" @click="handleCancelBinding">取消绑定</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="用户id" align="center" prop="userId" />
      <el-table-column label="账号" align="center" prop="userName"/>
      <el-table-column label="用户名称" align="center" prop="nickName"/>
      <el-table-column label="邮箱" align="center" prop="userEmail"/>
      <el-table-column label="手机号" align="center" prop="phonenumber"/>
      <el-table-column label="性别" width="120" sortable align="center">
        <template v-slot="scope">
          <dictTag :options="dict.dictType.user_sex" :value="scope.row.userSex"/>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="120" align="center">
        <template v-slot="scope">
          <dictTag :options="dict.dictType.user_status" :value="scope.row.userStatus"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template  v-slot="scope">
          <el-button type="text" size="small" @click="cancelBinding(scope.row)">取消绑定</el-button>
        </template>
      </el-table-column>
    </el-table>

    <page
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.current"
        :limit.sync="queryParams.size"
        @pagination="getList"
    />

    <!-- 添加或修改角色配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1100px" append-to-body>

      <el-form :model="authorizationUserQueryParams" size="medium" ref="authorizationUserQueryForm" label-width="75px">
        <el-form-item label="账号" prop="userName" size="mini">
          <el-input v-model="authorizationUserQueryParams.userName" clearable placeholder="请输入账号"/>
        </el-form-item>

        <el-form-item label="用户名称" prop="nickName" size="mini">
          <el-input v-model="authorizationUserQueryParams.nickName" clearable placeholder="请输入用户名称"/>
        </el-form-item>

        <el-form-item size="mini">
          <el-button type="primary" icon="el-icon-search" @click="authorizationUserSearchQuery">提交</el-button>
          <el-button type="primary" icon="el-icon-refresh" @click="authorizationUserResetQuery">重置</el-button>
        </el-form-item>

      </el-form>

      <el-table v-loading="authorizationLoading" :data="authorizationUserList" @selection-change="authorizationUserHandleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="用户id" align="center" prop="userId" />
        <el-table-column label="账号" align="center" prop="userName"/>
        <el-table-column label="用户名称" align="center" prop="nickName"/>
        <el-table-column label="角色" align="center" prop="roleName">
          <template v-slot="scope">
            <a v-for="(item, index) in  scope.row.roleName" :key="index">{{item.roleName}}  </a>
          </template>
        </el-table-column>
      </el-table>
      <page
          v-show="authorizationUserListTotal>0"
          :total="authorizationUserListTotal"
          :page.sync="authorizationUserQueryParams.current"
          :limit.sync="authorizationUserQueryParams.size"
          @pagination="authorizationUser"
      />
      <div slot="footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  authorizationUserList,
  batchCancelBinding, bindingUser,
  cancelBinding,
  selectRoleUser
} from "@/api/admin/role/allocationUser";
import Page from "@/components/page.vue";
import dictTag from "@/components/dictTag.vue";
export default {
  name: "allocationUser",
  dicts:["user_sex","user_status"],
  components: {Page,dictTag},
  data(){
    return{
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 是否显示弹出层
      open: false,
      // 弹出层标题
      title: "",
      //表格数据
      userList:[],
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      // 查询参数  current 当前页   size 页大小
      queryParams: {
        current: 1,
        size: 10,
        roleId:undefined,
        nickName: undefined,
        userName: undefined
      },

      // 授权用户遮罩层
      authorizationLoading: true,
      // 授权用户列表
      authorizationUserList: [],
      // 授权用户总条数
      authorizationUserListTotal: 0,
      // 授权用户选中数组
      authorizationUserIds: [],
      // 授权用户查询参数  current 当前页   size 页大小
      authorizationUserQueryParams:{
        current: 1,
        size: 10,
        roleId:undefined,
        nickName: undefined,
        userName: undefined
      },

    }
  },
  methods:{

    // 获取角色id
    getRoute(){
      this.queryParams.roleId = this.$route.params.roleId
    },

    // 根据角色id分页查询用户
    getList(){
      selectRoleUser(this.queryParams).then(res =>{
        this.userList = res.data.records;
        this.total = res.data.total;
        this.loading = false;
      })
    },
    // 搜索按钮操作
    searchQuery() {
      this.queryParams.current = 1;
      this.getList();
    },
    // 重置按钮操作
    resetQuery() {
      this.resetForm("queryForm");
      this.searchQuery();
    },

    // 行工具栏--取消绑定
    cancelBinding(row){
      const userId = row.userId;
      const roleId = this.queryParams.roleId;
      this.$modal.confirm('是否解除绑定？').then(function (){
        return cancelBinding(roleId,userId);
      }).then(res =>{
        this.getList();
        this.$modal.msgSuccess(res.msg);
      })
    },

    // 头工具栏--批量取消绑定
    handleCancelBinding(){
      if (this.ids.length === 0) {
        this.$modal.msgWarning('请选择要取消绑定的用户！')
      }else{
        const userIds = this.ids.join(",");
        const roleId = this.queryParams.roleId;
        this.$modal.confirm('是否解除绑定？').then(function (){
          return batchCancelBinding({roleId: roleId, userIds: userIds});
        }).then(res =>{
          this.getList();
          this.$modal.msgSuccess(res.msg);
        })
      }
    },

    // 头工具栏--绑定用户
    handleBindingUser(){
      this.authorizationUser();
      this.open = true;
      this.title = "绑定用户";
    },
    // 搜索按钮操作
    authorizationUserSearchQuery() {
      this.authorizationUserQueryParams.current = 1;
      this.authorizationUser();
    },
    // 重置按钮操作
    authorizationUserResetQuery() {
      this.resetForm("authorizationUserQueryForm");
      this.authorizationUserSearchQuery();
    },
    // 获取授权用户列表
    authorizationUser(){
      authorizationUserList(this.authorizationUserQueryParams).then(res =>{
        this.authorizationUserList = res.data.records;
        this.authorizationUserListTotal = res.data.total;
        this.authorizationLoading = false;
      })
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.resetForm("authorizationUserQueryForm");
      this.authorizationUserIds = [];
    },
    // 提交按钮
    submitForm(){
      const userIds = this.authorizationUserIds.join(",");
      const roleId = this.queryParams.roleId;
      bindingUser({roleId: roleId, userIds: userIds}).then(res =>{
        this.authorizationUser();
        this.getList();
        this.$modal.msgSuccess(res.msg);
      })
    },


    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.userId)
    },
    // 授权用户多选框选中数据..
    authorizationUserHandleSelectionChange(selection){
      this.authorizationUserIds = selection.map(item => item.userId)
    },
  },
  // 初始化
  created() {
    this.getRoute();
    this.getList();
  }
}
</script>

<style scoped>
.el-row {
  display: inline-block;
}
.el-form-item {
  display: inline-block;
}
</style>
